<template>
	<view class="container" :style="{paddingTop: statusBarHeight + 'px', background: 'linear-gradient(to bottom, #FF2F3A 0%, #FE4650 '+ (statusBarHeight + 44)+'px ,#F8F8F8  672rpx ,  #F8F8F8 100%)'}">
		<view style="position: fixed; top: 0; left: 0; width: 100vw; background: linear-gradient(to bottom, #FF2F3A 0% ,  #FE4650 100%);;z-index: 10;" :style="{paddingTop: statusBarHeight + 44 + 'px'}">
		</view>
		<uni-nav-bar title="确认订单" :border="false" left-icon="left"  background-color="transparent" fixed color="#fff" class="nav_bar" @clickLeft="back" ></uni-nav-bar>
		<view class="card" style="display: flex;align-items: center;font-size: 28rpx;" v-if="goodsInfo.is_fic != '1'">
			<view class="" style="width: 300rpx;">
				确认下单方式：
			</view>
			<radio-group @change="radioChange" style="display: flex;align-items: center;">
				<label v-for="(item, index) in items" :key="item.value" style="display: flex;align-items: center;">
					<view>
						<radio :value="item.value" :checked="index === is_self_get" color="#fe4b20"/>
					</view>
					<view>{{item.name}}</view>
				</label>
			</radio-group>
		</view>
		<view class="card" v-if="is_self_get == 1 || goodsInfo.is_fic == '1'">
			<view class="card_top">
				<view class="title" style="font-size: 28rpx;">
					<text style="color: #666666;">店铺：</text>{{shop_info.shopname}}
				</view>
			</view>
			<view class="center">
				<view class="" style="padding: 10rpx 0; margin-top: 18rpx;">
					{{shop_info.user_name}}｜{{shop_info.mobile}}
				</view>
				<view class="" style="padding: 10rpx 0;">
					{{shop_info.address}}
				</view>
			</view>
		</view>
		<view v-else>
			<view class="card custom_info" @click="toChooseAddress" v-if="!address || !address.id">
				请选择收货地址
			</view>
			<view class="card custom_info" @click="toChooseAddress" v-else>
				<view class="card_top">
					<view class="title">
						{{address.name}}
					</view>
					<view class="phone">
						{{address.mobile}}
					</view>
				</view>
				<view class="center">
					<text v-if="type=='pay'">{{address.formatted_address}}</text>{{address.address}}
				</view>
			</view>
		</view>
		<view class="card goods_info">
			<view class="card_top">
				<view class="title">
					商品信息
				</view>
			</view>
			<view class="center">
				<view class="goods_img">
					<image :src="goodsInfo.image" mode="widthFix" class="img"></image>
				</view>
				<view class="goods_info_main">
					<view class="name">
						{{goodsInfo.title}}
					</view>
					<view class="spu_text">
						<text v-if="type =='repay'">
							<text v-for="item in goodsInfo.difference.split(',')" :key="item" style="margin-right: 10rpx;padding: 5rpx 20rpx;border: 2rpx solid #F0F0F0;">{{item}}</text>
						</text>
						<text v-else>
							<text v-for="item in sku.difference" :key="item" style="margin-right: 10rpx;padding: 5rpx 20rpx;border: 2rpx solid #F0F0F0;">{{item}}</text>
						</text>
					</view>
					<view class="price_num">
						<view class="number">
							数量：{{number}}
						</view>
						<view class="goods_info_bottom">
							<view class="amount"> 金额{{totalPrice}} </view>
							<view class="paid">
								<text style="margin-right: 4rpx;">实付额</text><text style="color: #FA2C1E;">¥{{totalPrice}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- <view class="card goods_info">
			<view class="card_top">
				<view class="title">
					商品信息
				</view>
			</view>
			<view class="center">
				<view class="goods_img">
					<image :src="goodsInfo.image" mode="widthFix" class="img"></image>
				</view>
				<view class="goods_info_main">
					<view class="goods_info_main_left">
						<view class="name">
							{{goodsInfo.title}}
						</view>
						<view class="labels">
							<view class="label" v-for="(label,i) in goodsInfo.label_ids" :key="label">
								{{label}}
							</view>
						</view>
						<view class="spu_text">
							已选中：
							<text v-if="type =='repay'">{{goodsInfo.difference}}</text>
							<text v-else v-for="item in sku.difference" :key="item" style="margin-right: 10rpx;">{{item}}</text>
						</view>
					</view>
					<view class="goods_info_main_right">
						<view class="number">
							x{{number}}
						</view>
					</view>
				</view>
			</view>
			<view class="goods_info_bottom">
				<view class="amount"> 金额{{totalPrice}} </view>
				<view class="paid">
					<text style="margin-right: 4rpx;">实付额</text><text style="color: #FA2C1E;">¥{{totalPrice}}</text>
				</view>
			</view>
		</view> -->
		<view class="card other_info">
			<view class="title"> 备注 </view>
			<textarea v-model="remarks" placeholder="建议留言前先与商家沟通确认" class="value input" auto-height maxlength="100"/>
			<view class="remarks_num">
				{{remarks.length}} / 100
			</view>
		</view>
		<view class="card other_info">
			<view class="cell" style="margin-bottom: 0;">
				<view class="label"> 商品金额 </view> <view class="value" style="font-size: 26rpx;font-weight: 500;color: #FA2C1E;"> ¥{{totalPrice}} </view>
			</view>
		</view>
		<view class="card pay_info">
			<view class="cell" style="margin-bottom: 0;">
				<view class="label">
					<image src="../../../static/wechatPay.png" mode="widthFix" class="img"></image>
					<view class="">
						微信支付
					</view>
				</view>
				<view class="value">
					<radio value="wxzf" checked="true" style="transform:scale(0.8);" color="#FA2C1E" />
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="number">
				共{{number}}件
			</view>
			<view class="right">
				<view class="payment">
					<text>合计：</text>
					<text style="font-size: 40rpx;color: #FA5151;">¥{{totalPrice}}</text>
				</view>
				<view class="pay_btn">
					<button type="default" class="btn" @click="settlement">结算</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {goodsDetail,getaddress,getOrderGoodsList,payment,getOrderInfo,getPay} from '../../../api/api.js'
	export default {
		data() {
			return {
				statusBarHeight:'',
				type:'pay', // pay:第一次确认订单，repay:支付失败后已生成订单再次支付
				id:'', //订单ID
				shop_id:'', //店铺ID
				shop_info:{}, //店铺信息
				goods_id:'', //商品ID
				number: 1,  //商品数量
				sku_id:'', //sku
				goodsInfo:{}, //商品信息
				address:'', //客户地址
				is_self_get:0, //0快递  1上门自提
				items:[{value:'0',name:'快递配送'},{value:'1',name:'线下自提'}], //配合is_self_get
				remarks:''//备注
			}
		},
		computed:{
			sku(){
				if(this.goodsInfo.sku){
					return this.goodsInfo.sku.find(s=>s.id == this.sku_id)
				}else {
					return this.goodsInfo
				}
			},
			totalPrice(){
				if(this.type == 'repay'){
					return this.goodsInfo.price
				}else {
					return this.sku?Number(this.sku.price * this.number).toFixed(2):0
				}
			},
			// input输入框宽度自适应
			inputWid() {
				return function(value) {
					if (value == '' || value == 0) {
						return '210rpx';
					} else {
						return (String(value).length + 1) * 17 + 'rpx';
					}
				};
			}
		},
		onLoad(options) {
			this.type = options.type
			if(options.id){
				this.id = options.id
				this.getOrderInfo()
			}else {
				this.shop_id = options.shopId
				this.goods_id = options.goodsId
				this.sku_id = options.skuId
				this.number = options.number
				this.shopname = options.shopname
				this.getGoodsDetail()
			}
			this.GetStatusBarHeight();
			
		},
		onShow(){
			this.getaddress()
		},
		methods:{
			//获取状态栏的高度
			GetStatusBarHeight() {
			    let that = this;
			       wx.getSystemInfo({
			        success: function (res) {
			            that.statusBarHeight = res.statusBarHeight;
			        },
			    });
			},
			back(){
				uni.navigateBack()
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.is_self_get = i;
						break;
					}
				}
			},
			toChooseAddress(){
				uni.navigateTo({
					url:'/pages/my/myDeliveryAddress?type=chooseAddress'
				})
			},
			getSelectedAddress(address){
				this.address = address
			},
			getaddress(){
				getaddress().then(res=>{
					console.log(res)
					this.address = res.data.data.data.find(a=>a.default == '1')
				})
			},
			getGoodsDetail(){
				goodsDetail({goods_id:this.goods_id,shop_id:this.shop_id}).then(res=>{
					console.log(res)
					let {shop_info} = res.data.data
					this.goodsInfo = res.data.data
					this.shop_info = shop_info
				})
			},
			getOrderInfo(){
				getOrderInfo({id:this.id}).then(res=>{
					this.orderInfo = res.data.data
					let {address,shop,shop_user,goods,shop_id} = res.data.data
					this.address = address
					this.shop_id = shop_id
					this.shop_info = {...shop,...shop_user}
					this.goodsInfo = goods[0]
					this.goods_id = this.goodsInfo.id
				})
			},
			//结算
			settlement(){
				//1、判断是否选中地址
				let needAddress = true
				// 自提或虚拟商品 不需要地址
				if(this.is_self_get == 1 || this.goodsInfo.is_fic == '1') {
					needAddress = false
				}
				// 不需要地址 或者 有地址
				if(!needAddress || (this.address && this.address.id)){
					// 重新发起支付
					if(this.type == 'repay'){
						getPay({order_id:this.id}).then(res=>{
							console.log(res.data)
							//拿到 token 和 订单ID
							let token = res.data.data.token
							let order_id = res.data.data.order_id
							this.pay(token,order_id)
						})
					}else {
						//2、提交订单
						getOrderGoodsList({shop_id:this.shop_id,goods_id:this.goods_id,sku_id:this.sku_id,address_id:this.address.id,number:this.number,is_self_get:this.is_self_get,remarks:this.remarks}).then(res=>{
							console.log(res)
							//拿到 token 和 订单ID
							let token = res.data.data.token
							let order_id = res.data.data.list[0].order_id
							this.pay(token,order_id)
						})
					}
				}else {
					uni.showToast({
						icon:'none',
						title: '请选择收货地址',
						duration: 2000
					});
				}
			},
			pay(token,order_id){
				//3、微信登录
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function (loginRes) {
						console.log(loginRes);
						// 4、提交支付
						payment({order_id,token,code:loginRes.code}).then(res=>{
							console.log(res)
							// 5、调用微信支付
							uni.requestPayment({
								provider: 'wxpay',    //支付类型-固定值
								timeStamp: res.data.data.timeStamp, // 时间戳（单位：秒）
								nonceStr: res.data.data.nonceStr, // 随机字符串
								package: res.data.data.package, // 固定值
								signType: "MD5", //固定值
								paySign: res.data.data.paySign, //签名
								success: function (res) {
									console.log('success:' + JSON.stringify(res));
									console.log("支付成功");
									uni.redirectTo({
										url: '/pages/my/myOrders'
									});
								},
								fail: function (err) {
									console.log('fail:' + JSON.stringify(err));
									console.log("支付失败");
									uni.redirectTo({
										url: '/pages/my/myOrders'
									});
								}
							});
						})
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.container {
	min-height: 100vh;
	width: 100%;
	background: linear-gradient(to bottom, #FF2F3A 0%, #FE4650 44px ,#F8F8F8  672rpx ,  #F8F8F8 100%);
	padding: 0 24rpx;
	padding-top: var(--status-bar-height);
	padding-bottom: calc(156rpx + env(safe-area-inset-bottom));
}
.card {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-top: 24rpx;
	.card_top {
		height: 72rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #E7E7E7;
		display: flex;
		align-items: center;
		.title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 700;
			color: #222222;
		}
		
	}
	.cell {
		display: flex;
		// align-items: center;
		font-size: 26rpx;
		line-height: 36rpx;
		margin-bottom: 20rpx;
		.label {
			flex: 1;
			color: #333333;
		}
		.value {
			flex: 2;
			text-align: right;
			color: #222222;
		}
	}
}

.custom_info {
	.card_top {
		.phone {
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			margin-left: 30rpx;
		}
	}
	.center {
		margin-top: 22rpx;
	}
}
.goods_info {
	.center {
		margin-top: 32rpx;
		height: 150rpx;
		width: 100%;
		display: flex;
		.goods_img {
			width: 150rpx;
			height: 150rpx;
			display: flex;
			align-items: center;
			.img {
				width: 150rpx;
				height: 100%;
			}
		}
		
		//旧版本
		.goods_info_main {
			width: 100%;
			margin-left: 20rpx;
			display: flex;
			justify-content: space-between;
			.goods_info_main_left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.labels {
					width: 100%;
					// margin-top: 26rpx;
					display: flex;
					.label {
						font-size: 18rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FA2C1E;
						line-height: 30rpx;
						background: #FFFFFF;
						box-shadow: 0px 4rpx 30rpx rgba(0,0,0,0.05);
						border-radius: 6rpx;
						border: 2rpx solid #FA2C1E;
						margin-right: 8rpx;
						padding: 4rpx 16rpx;
					}
				}
				.spu_text {
					font-size: 26rpx;
					color: #999;
				}
			}
			.goods_info_main_right {
				.number {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		//新版本
		.goods_info_main {
			width: 100%;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.labels {
				width: 100%;
				display: flex;
				.label {
					font-size: 18rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FA2C1E;
					line-height: 30rpx;
					background: #FFFFFF;
					box-shadow: 0px 4rpx 30rpx rgba(0,0,0,0.05);
					border-radius: 6rpx;
					border: 2rpx solid #FA2C1E;
					margin-right: 8rpx;
					padding: 4rpx 16rpx;
				}
			}
			.spu_text {
				font-size: 26rpx;
				color: #999;
			}
			.price_num {
				width: 100%;
				display: flex;
				justify-content: space-between;
				.number {
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
	}
	.goods_info_bottom {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		.amount{
			color: #999999;
			line-height: 24rpx;
			margin-right: 24rpx;
		}
		.paid {
			color: #222222;
			line-height: 28rpx;
		}
	}
}
.other_info {
	position: relative;
	.cell {
		.value {
			.input {
				font-size: 26rpx;
			}
		}
	}
	.title {
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #222222;
	}
	.input {
		min-height: 200rpx;
		margin-top: 20rpx;
		width: 100%;
	}
	.remarks_num {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 36rpx;
	}
}
.pay_info {
	.cell {
		.label {
			display: flex;
			align-items: center;
			.img {
				width: 52rpx;
				height: 52rpx;
				margin-right: 24rpx;
			}
		}
		
	}
}
.bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: calc(136rpx + env(safe-area-inset-bottom));
	padding: 24rpx 30rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	font-family: PingFangSC-Regular, PingFang SC;
	.number {
		font-size: 26rpx;
		color: #666666;
	}
	.right {
		height: 100%;
		display: flex;
		align-items: center;
		.payment {
			color: #222222;
		}
		.pay_btn {
			margin-left: 24rpx;
			.btn {
				width: 240rpx;
				height: 88rpx;
				background: linear-gradient(90deg, #FF4050 0%, #FA2C1E 100%);
				border-radius: 8rpx;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
}
</style>
